<template>
  <div class="goods-add-page">
    <van-nav-bar
      v-if="!isWxapp"
      left-arrow
      fixed
      placeholder
      :border="false"
      title="购物"
      @click-left="back"
    >
      <template #title>
        <div class="nav-bar-title">
          <span>{{ isAdd ? '添加美食' : '编辑美食' }}</span>
        </div>
      </template>
    </van-nav-bar>
    <div class="goods-add-content">

      <div class="gac-item">
        <span class="gac-required">*</span>
        <van-field
          v-model="detail.cookname"
          class="gac-input"
          label=""
          placeholder="请输入美食名"
        />
      </div>

      <div class="gac-item gac-img-item">
        <ImageUploader
            :flagtip="detail.cookname"
            :value="imgs"
            @change="handleUpload"
          />
      </div>

      <div class="gac-item">
        <span class="gac-required required-status">*</span>
        <van-field
          class="gac-status"
          readonly
          clickable
          name="picker"
          :value="pickvalue"
          placeholder="请选择好吃星度"
          @click="showPicker = true"
        />
        <van-icon class="right-icon" name="arrow" />
      </div>

      <div class="gac-item">
        <van-field
          v-model="detail.food"
          class="gac-input"
          label=""
          placeholder="请输入食材"
        />
      </div>

      <div class="gac-item">
        <van-field
          v-model="detail.ingredient"
          class="gac-input"
          label=""
          placeholder="请输入配料"
        />
      </div>

      <div class="gac-item gac-mark-item">
        <van-field
          v-model="detail.step"
          rows="2"
          autosize
          class="gac-input"
          type="textarea"
          maxlength="200"
          placeholder="请输入步骤"
          show-word-limit
        />
      </div>

      <div class="gac-item gac-mark-item">
        <van-field
          v-model="detail.mark"
          rows="2"
          autosize
          class="gac-input"
          type="textarea"
          maxlength="50"
          placeholder="请输入备注"
          show-word-limit
        />
      </div>

     
    </div>
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
    
    <div class="gac-footer">
      <span v-if="!isAdd" class="gac-submit-del" @click="submitdel">删除</span>
      <span class="gac-submit-ok" @click="submitok">提交</span>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs';
import ImageUploader from "@/components/imageUploader/image-uploader.vue"
import { Toast, Dialog } from 'vant';

const statusTxts = {
  1: '1星',
  2: '2星',
  3: '3星',
  4: '4星',
  5: '5星',
};

export default {
  name: 'CookAdd',
  layout: 'barHeight',
  components: {
    ImageUploader,
  },
  data() {
    return {
      isWxapp: this.$route.query.fromkey === 'wxapp',
      detail: {
        cookname: this.$route.query.cookname,
        mark: '',
      },
      date: '',
      imgs: [],
      addImgKey: 0,
      isAdd: !this.$route.query.cookname,
      maps: statusTxts,
      reverseMaps: Object.entries(statusTxts).reduce((acc, item) => {
        acc[item[1]] = item[0];
        return acc;
      }, {}),
      pickvalue: statusTxts[5],
      showPicker: false,
      columns: [...Object.values(statusTxts)],
    };
  },
  head: {
    title: '美食',
  },
  mounted() {
    if (!this.isAdd) {
      this.getdata();
    }
  },
  methods: {
     // 图片上传
    handleUpload(list) {
      this.imgs = list
    },
    async submitAdd() {

      const params = {
        ...this.detail,
        status: this.reverseMaps[this.pickvalue],
        imgs: this.imgs,
      };
      const res = await this.$http.post('/api/cook/add', params);
      if (res.code === 200) {
        Toast.success('提交成功');
      }
    },
    async submitedit() {
      const params = {
        ...this.detail,
        status: this.reverseMaps[this.pickvalue],
        cookname: this.$route.query.cookname,
        imgs: this.imgs,
        newcookname: this.detail.cookname,
      };
      const res = await this.$http.post('/api/cook/update', params);
      if (res.code === 200) {
        Toast.success('提交成功');
      }
    },
    async submitdel() {
      Dialog.confirm({
        title: '',
        message: '确认要删除吗？',
        confirmButtonText: '确认',
        cancelButtonText: '取消',
      })
        .then(async () => {
          try {
            const params = {
              cookname: this.$route.query.cookname,
            };
            const res = await this.$http.post('/api/cook/del', params);
            if (res.code === 200) {
              Toast.success('删除成功');
            }
          } catch (e) {
            console.log(e);
          }
        })
        .catch(() => {});
    },
    submitok() {
      if (this.isAdd) {
        this.submitAdd();
      } else {
        this.submitedit();
      }
    },
    onConfirm(value) {
      this.pickvalue = value;
      this.showPicker = false;
    },
    async getdata() {
      const response = await this.$http.post('/api/cook/list', {
        pageNo: 1,
        pageSize: 200,
        cookname: this.$route.query.cookname,
      });
      const res = response && response.data;
      const detail = (res && res[0]) || {};
      this.pickvalue = this.maps[detail.status];
      this.imgs = detail.imgs;
      this.detail = detail;
    },
    back() {
      this.$router.back()
    },
  },
};
</script>

<style lang="less" scoped>
@height-wrap: 44px;
@paddingbottom: 8px;
.goods-add-page {
  .gac-required {
    color: red;
    font-size: 12px;
    margin-right: 7px;
  }
  .required-status {
    margin-right: -7px;
  }
  .gac-item {
    display: flex;
    align-items: center;
    padding: 0 12px;
    margin: 0 16px;
    background: #f7f8fa;
    border-radius: 8px;
    height: 44px;
    margin-top: 12px;
  }
  .gac-mark-item {
    height: auto;
  }
  .gac-empty {
    color: #c8c9cc;
  }

  .gac-date {
    flex: 1;
  }
  .gac-input {
    background: transparent;
    padding-left: 0;
  }
  .gac-status {
    background: transparent;
  }
  .right-icon {
    color: #bfbfbf;
  }
  .gac-submit-del,
  .gac-submit-ok {
    height: 100%;
    line-height: 44px;
    font-size: 16px;
    border-radius: 22px;
    padding-left: 28px;
    padding-right: 28px;
  }
  .gac-footer {
    display: flex;
    position: fixed;
    bottom: 0;
    //让图层更高
    z-index: 2;
    left: 0;
    right: 0;
    justify-content: center;
    align-items: center;
    height: 60px;
    background: #fff;
    box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.05);
    padding: @paddingbottom 16px;
  }
 
  .gac-submit-del {
    background: #f7f8fa;
    color: #131212;
    margin-right: 12px;
    text-align: center;
  }
  .gac-submit-ok {
    flex: 1;
    background: #538fff;
    text-align: center;
    color: #fff;
  }
  .gac-del-diable {
    background: #f7f8fa;
    color: #979797;
  }

  .gac-ok-diable {
    background: #d8d8d8;
    color: #fff;
  }

  .gac-img-item{
    height: auto;
    background: transparent;
    padding: 0;
  }
}
</style>
